<!-- <template>
  <div class="common-layout">
    <a-carousel :after-change="onChange" :dots="false">
      <div v-for="item in testBankDetailStore.testbankdetailDatas" :key="item.iid">
        <h2>{{ item.question }}</h2>
        <a-radio-group v-model:value="value">
          <a-radio :style="radioStyle" :value="1">{{ item.options[0].value }}</a-radio>
          <a-radio :style="radioStyle" :value="2">{{ item.options[1].value }}</a-radio>
          <a-radio :style="radioStyle" :value="3">{{ item.options[2].value }} </a-radio>
          <a-radio :style="radioStyle" :value="4">{{ item.options[3].value }} </a-radio>
        </a-radio-group>
      </div>
    </a-carousel>
  </div>
</template>
<script setup lang="ts">
import { useTestBankDetailStore } from '@/stores/testbank/testbankdetail/testbankdetail.ts'
import { useRoute } from 'vue-router'
const route = useRoute()
import { ref, reactive } from 'vue'
const onChange = (current: number) => {
  console.log(current)
}

const value = ref<number>()
const radioStyle = reactive({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
})

// const activeNames = ref(['1'])

// const radio = ref('0')
// const radio2 = ref('0')
// const radio3 = ref('0')
// const radio4 = ref('0')
console.log('当前路由参数:', route.params)
const iid = Number(route.params.iid)

// const iid = parseInt(route.query.iid)

console.log(iid, '4444')

const testBankDetailStore = useTestBankDetailStore()
testBankDetailStore.testAdminBankDetailResultAction(iid)
</script>
<style lang="less" scoped>
.common-layout {
  height: 600px;
}

/* For demo */
:deep(.slick-slide) {
  text-align: center;
  height: 450px;
  line-height: 160px;
  background: #eee;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style> -->

<!-- <template>
  <div class="common-layout">
    <a-carousel :after-change="onChange" :dots="false">
      <div v-for="item in testBankDetailStore.testbankdetailDatas" :key="item.iid">
        <h2>{{ item.question }}</h2>
        <a-radio-group  v-model:value="userAnswers[item.iid]"
        class="options-group"
        :disabled="showResult">
          <a-radio v-for="option in item.options"
          :key="option.value"
          :value="option.value"
          :class="{ 'correct-answer': showResult && option.value === item.correctAnswer }">{{ option.label }}</a-radio>
         
        </a-radio-group>
      </div>
    </a-carousel>
  </div>
</template>
<script setup lang="ts">
import { useTestBankDetailStore } from '@/stores/testbank/testbankdetail/testbankdetail.ts'
import { useRoute } from 'vue-router'
const route = useRoute()
import { ref, reactive } from 'vue'
const onChange = (current: number) => {
  console.log(current)
}

const value = ref<number>()
const radioStyle = reactive({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
})

// const activeNames = ref(['1'])

// const radio = ref('0')
// const radio2 = ref('0')
// const radio3 = ref('0')
// const radio4 = ref('0')
console.log('当前路由参数:', route.params)
const iid = Number(route.params.iid)

// const iid = parseInt(route.query.iid)

console.log(iid, '4444')

const testBankDetailStore = useTestBankDetailStore()
testBankDetailStore.testAdminBankDetailResultAction(iid)
</script>
<style lang="less" scoped>
.common-layout {
  height: 600px;
}

/* For demo */
:deep(.slick-slide) {
  text-align: center;
  height: 450px;
  line-height: 160px;
  background: #eee;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>
 -->

<template>
  <div class="quiz-container">
    <div>
      <a-page-header
        style="border: 1px solid rgb(235, 237, 240)"
        title="题库"
        sub-title="行测题库"
        @back="() => $router.go(-1)"
      />
    </div>
    <!-- 题目列表 -->
    <a-card
      v-for="(item, index) in testBankDetailStore.testbankdetailDatas"
      :key="item.iid"
      class="question-card"
      :title="`题目 ${index + 1}`"
    >
      <!-- 题目内容 -->
      <div class="question-content">
        {{ item.question }}
      </div>

      <!-- 选项列表 -->
      <a-radio-group
        v-model:value="userAnswers[item.iid]"
        class="options-group"
        :disabled="showResult"
      >
        <a-radio
          v-for="option in item.options"
          :key="option.value"
          :value="option.value"
          :class="{ 'correct-answer': showResult && option.value === item.correctAnswer }"
        >
          {{ option.label }}
        </a-radio>
      </a-radio-group>

      <!-- 结果反馈（仅在提交后显示） -->
      <div v-if="showResult" class="result-feedback">
        <a-tag :color="item.correctAnswer === userAnswers[item.iid] ? 'green' : 'red'">
          {{
            item.correctAnswer === userAnswers[item.iid]
              ? '✅ 正确'
              : `❌ 错误（正确答案：${item.correctAnswerLabel}）`
          }}
        </a-tag>
      </div>
    </a-card>

    <!-- 操作按钮 -->
    <div class="action-bar">
      <a-button type="primary" :disabled="showResult" @click="checkAnswers"> 提交答案 </a-button>
      <a-button style="margin-left: 12px" @click="resetQuiz"> 重置答题 </a-button>
    </div>

    <!-- 统计信息 -->
    <div v-if="showResult" class="statistics">
      <a-statistic title="正确题数" :value="correctCount" />
      <a-statistic title="正确率" :value="accuracy" suffix="%" :style="{ marginLeft: 32 }" />
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref, reactive, computed } from 'vue'

// import { useTestBankDetailStore } from '@/stores/testbank/testbankdetail/testbankdetail.ts'
// import { useRoute } from 'vue-router'
// import { message } from 'ant-design-vue'
// const route = useRoute()

// console.log('当前路由参数:', route.params)
// const iid = Number(route.params.iid)

// // const iid = parseInt(route.query.iid)

// console.log(iid, '4444')

// const testBankDetailStore = useTestBankDetailStore()
// const res = testBankDetailStore.testAdminBankDetailResultAction(iid)
// console.log(testBankDetailStore.testbankdetailDatas, '新的请求到的数据')

// // 题目数据（示例）
// // const questions = reactive([
// //   {
// //     id: 1,
// //     content: '2 + 2 = ?',
// //     options: [
// //       { label: 'A. 3', value: 'A' },
// //       { label: 'B. 4', value: 'B' },
// //       { label: 'C. 5', value: 'C' },
// //     ],
// //     correctAnswer: 'B',
// //     correctAnswerLabel: 'B. 4',
// //   },
// //   {
// //     id: 2,
// //     content: 'Vue的作者是？',
// //     options: [
// //       { label: 'A. React 团队', value: 'A' },
// //       { label: 'B. Evan You', value: 'B' },
// //       { label: 'C. Angular 团队', value: 'C' },
// //     ],
// //     correctAnswer: 'B',
// //     correctAnswerLabel: 'B. Evan You',
// //   },
// //   // 继续添加其他3道题...
// // ])

// // 用户答案（使用id作为key）
// const userAnswers = reactive<Record<number, string>>({})

// // 显示结果状态
// const showResult = ref(false)

// // 计算正确题数
// const correctCount = computed(() => {
//   return testBankDetailStore.testbankdetailDatas.reduce((count, q) => {
//     return userAnswers[q.id] === q.correctAnswer ? count + 1 : count
//   }, 0)
// })

// // 计算正确率
// const accuracy = computed(() => {
//   return ((correctCount.value / testBankDetailStore.testbankdetailDatas.length) * 100).toFixed(1)
// })

// // 确保以下数据类型一致
// // console.log('用户答案类型:', typeof userAnswers[item.iid]) // 应为 string
// // console.log('正确答案类型:', typeof item.correctAnswer) // 应为 string

// // 验证答案方法
// const checkAnswers = () => {
//   // 检查是否所有题目都已作答
//   const hasUnanswered = testBankDetailStore.testbankdetailDatas.some((q) => !userAnswers[q.iid])
//   if (hasUnanswered) {
//     return message.warning('请完成所有题目后再提交')
//   }

//   showResult.value = true
// }

// // 重置答题
// const resetQuiz = () => {
//   showResult.value = false
//   testBankDetailStore.testbankdetailDatas.forEach((q) => {
//     userAnswers[q.iid] = undefined
//   })
// }
import { ref, reactive, computed } from 'vue'
import { useTestBankDetailStore } from '@/stores/testbank/testbankdetail/testbankdetail.ts'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'

const route = useRoute()
const iid = Number(route.params.iid)
const testBankDetailStore = useTestBankDetailStore()
testBankDetailStore.testAdminBankDetailResultAction(iid)

// 用户答案（使用iid作为key）
const userAnswers = reactive<Record<number, string>>({})
const showResult = ref(false)

// 计算正确题数（修复类型问题）
const correctCount = computed(() => {
  return testBankDetailStore.testbankdetailDatas.reduce((count, q) => {
    return userAnswers[q.iid] === String(q.correctAnswer) ? count + 1 : count
  }, 0)
})

// 计算正确率
const accuracy = computed(() => {
  return ((correctCount.value / testBankDetailStore.testbankdetailDatas.length) * 100).toFixed(1)
})

// 验证答案方法（修复验证逻辑）
const checkAnswers = () => {
  const hasUnanswered = testBankDetailStore.testbankdetailDatas.some((q) => !userAnswers[q.iid])
  if (hasUnanswered) {
    message.warning('请完成所有题目后再提交')
    return
  }

  showResult.value = true
}

// 重置答题（修复重置逻辑）
const resetQuiz = () => {
  showResult.value = false
  testBankDetailStore.testbankdetailDatas.forEach((q) => {
    const userAnswers = ref<{ [key: number]: string | undefined }>({})

    userAnswers[q.iid] = undefined
  })
}
</script>

<style scoped>
.quiz-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.question-card {
  margin-bottom: 24px;
}

.options-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.correct-answer :deep(.ant-radio-inner) {
  border-color: #52c41a !important;
}

.result-feedback {
  margin-top: 12px;
  font-size: 14px;
}

.action-bar {
  text-align: center;
  margin: 24px 0;
}

.statistics {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style>
